<template>
  <div
    @contextmenu="_contextMenu"
    class="mini-panel" style="padding:0 10px;">
    <p v-if="datas.length < 1" style="text-align: center; width: 100%;height: calc(100vh - 600px);display: flex;align-items: center;justify-content: center;color:#909399;font-size:12px;">暂无数据</p>

    <el-popover
      v-else
      v-for="(item, index) in datas"
      :key="index"
      width="290px"
      trigger="hover"
      placement="right"
      :disabled="options.noPop || noPop"
      :open-delay="300"
      :close-delay="300"
      >
      <div class="tips">
        <p>名称: {{ item.name }}</p>
        <p v-if="item.showType === 'program'">类型: {{  
          item.type == '1' ? '普通节目' : (item.type == '2' ? '报站节目' : '紧急DTMB')
        }}</p>
        <p v-else>类型: {{ item.type | getTypeName }}</p>
        <template v-if="item.showType !== 'template'">
          <p v-if="item.showType === 'backgroud'">大小: {{ item.length }}</p>
          <p v-else-if="item.showType !== 'program'">大小: {{ item.fileSize }}</p>
          <p v-if="item.showType !== 'program'">描述: {{ item.comment }}</p>
        </template>
        <p>创建时间: {{ item.createdAt }}</p>
        <p>被使用: {{ item.refCount }}</p>
        <template v-if="item.showType !== 'newsMedia'">
          <p v-if="item.showType !== 'program' && item.showType !== 'template'">状态: {{ item | getStateName }}</p>
          <p>有效性: {{ item.validity ? '有效' : '无效' }}</p>
          <p v-if="item.showType === 'mediaAudit'" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">二维码地址: 
            <a v-if="item.qrCode" :href="item.qrCode" target="_blank">{{ item.qrCode }}</a>
            <a v-else href="javascript:;">无</a>
          </p>
          <template v-if="item.showType === 'mediaAudit'">
            <p>审核状态: {{ item.auditState | mediaAuditStateFilter }}</p>
            <p>审核流程: {{ item.auditState | mediaAuditFlow }}</p>
            <template v-if="item.auditState < 0">
              <p>未通过原因: {{ item.auditReason }}</p>
            </template>
          </template>
          <template v-else>
            <p v-show="item.showType !== 'media' && item.showType !== 'backgroud'">审核: {{ item.auditState | auditStateFilter }}</p>
          </template>
        </template>
        <p v-if="item.showType === 'media'" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">二维码地址: 
          <a v-if="item.qrCode" :href="item.qrCode" target="_blank">{{ item.qrCode }}</a>
          <a v-else href="javascript:;">无</a>
        </p>
        <p v-if="item.showType === 'media'" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">素材快照: 
          <a v-if="item.snapshotPath" :href="item.snapshotPath" target="_blank">{{ item.snapshotPath }}</a>
          <a v-else href="javascript:;">无</a>
        </p>
      </div>
      <!-- 在媒体审核中不需要多选 -->
      <template v-if="tempType === 'audit'">
        <div 
          @dblclick="handleClick(item)"
          @click.exact="handleActive(item)"
          class="photo"
          :class="[
            _getActiveClass(item),
            options.sizeType
          ]"
          slot="reference">
          <img :src="item.thumbnailFile ? item.thumbnailFile : defaultImg[item.type] ? defaultImg[item.type] : defaultImg.default" />
          <p>{{ item.name }}</p>
        </div>
      </template>
      <template v-else>
        <div 
          @dblclick="handleClick(item)"
          @click.exact="handleActive(item)"
          @click.ctrl.exact="handleCtrlClick(item)"
          @click.meta.exact="handleCtrlClick(item)"
          class="photo"
          :class="[
            _getActiveClass(item),
            options.sizeType
          ]"
          slot="reference">
          <img :src="item.thumbnailFile ? item.thumbnailFile : defaultImg[item.type] ? defaultImg[item.type] : defaultImg.default" />
          <p>{{ item.name }}</p>
        </div>
      </template>
    </el-popover>

     <context-menu
      element-id="miniPanelContextMenu"
      ref="miniPanelContextMenu"
      @option-clicked="contextMenuClicked"
      :options="contextMenus"
      ></context-menu>

  </div>
</template>

<script>
import ContextMenu from './ContextMenu'
import {fileTypeOpts, FILETYPE} from '../media-center/const'
import {getFileSize} from '@/utils'
// import App from '../../../App.vue'

export default {
  components: {
    ContextMenu
    // App
  },
  filters: {
    formatLength(v) {
      if (!v && v !== 0) return v
      if (/\*/.test(v)) return v
      return getFileSize(v)
    },
    getTypeName(v) {
      let fileType = fileTypeOpts.find(item => item.value == v)

      return fileType ? fileType.label : v
    },
    getStateName(v) {
      let msg = ''
      if(v.auditState === 0) {
        // -1:待转码 -2:转码失败 -3:转码中
        switch(v.state) {
          case -1:
            msg = '待转码'
            break
          case -2:
            msg = '转码失败'
            break
          case -3:
            msg = '转码中'
            break
          default:
            msg = "不可用"
        }
        return msg
      } else {
        return v.auditState == '3' ? '可用' : '不可用'
      }
    },
    auditStateFilter(val) {
      let msg = ''
      switch(val){
        case 0:
          msg = '待审核'
          break
        case 1:
          msg = '已通过'
          break
        case -1:
          msg = '已拒绝'
          break
      }
      return msg
    },
    mediaAuditStateFilter(val) {
      // 0:待一级审核 1:待二级审核 2:待三级审核 3:审核通过 -1:一级审核未通过 -2:二级审核未通过 -3:三级审核未通过
      let msg = ''
      if(val === 0 || val === 1 || val === 2) {
        msg = '待审核'
      } else if(val === 3) {
        msg = '已通过'
      } else {
        msg = '未通过'
      }
      return msg
    },
    mediaAuditFlow(val) {
      // 一审、二审、三审，已完成
      let msg = ''
      if(val === 0) {
        msg = '一审'
      } else if(val === 1) {
        msg = '二审'
      } else if(val === 2) {
        msg = '三审'
      } else if(val === 3) {
        msg = '已完成'
      } else {
        msg = '一审'
      }
      return msg
    }
  },
  props: {
    contextMenus: {
      type: Array,
      default() {
        return []
        // return [
        //   {name: '选项1', v: 1},
        //   {type: 'divider'},
        //   {name: '选项2', v: 2}
        // ]
      }
    },
    datas: {
      type: Array,
      default() {
        return []
      }
    },
    keyName: {
      type: String,
      default: 'id'
    },
    options: {
      type: Object,
      default() {
        return {
          noPop: false,
          sizeType: '', // 'medium': 185x130 'bsmall': 150x130 'small': 130x100
        }
      }
    },
    multiple: { // 是否多选 默认 false
      type: Boolean,
      default: false
    },
    // 用于控制是否按住ctrl键多选
    tempType: {
      type: String,
      default: 'media'
    }
  },
  data() {
    return {
      FILETYPE,
      activeId: '',
      activeArr: [],
      defaultImg: {
        [FILETYPE.VIDEO]: require('@/assets/defaultImg/video.png'), // 视频
        [FILETYPE.AUDIO]: require('@/assets/defaultImg/music.png'), // 音频
        [FILETYPE.PICTURE]: require('@/assets/defaultImg/pic.png'), // 图片
        [FILETYPE.TEXT]: require('@/assets/defaultImg/text.png'), // 文本
        [FILETYPE.LOCAL_TEXT]: require('@/assets/defaultImg/oip.png'), // 本地文本
        [FILETYPE.QRCODE]: require('@/assets/defaultImg/oip.png'), // 二维码
        [FILETYPE.NET_PICTURE]: require('@/assets/defaultImg/screenshot.png'), // 网络图片
        [FILETYPE.NET_TEXT]: require('@/assets/defaultImg/webtext.png'), // 网络文本
        [FILETYPE.STREAM]: require('@/assets/defaultImg/streaming.png'), // 流媒体
        [FILETYPE.DVB]: require('@/assets/defaultImg/dvb.png'), // DVB频道
        [FILETYPE.WEB_CAPTURE]: require('@/assets/defaultImg/webpage.png'), // 网页截图
        [FILETYPE.FOLDER]: require('@/assets/defaultImg/oip.png'), // 文件夹
        default: require('@/assets/defaultImg/default.png') // 未知类型缺省图片
      },
      noPop: false,
      whereUrl: '',
      isCtrlMode: false
    }
  },
  created() {
    this.whereUrl = this.$route.path
  },
  watch: {
    datas() {
      this.activeId = ''
      this.activeArr = []
    },
    '$route.path': function(newVal,oldVal){
      this.noPop = newVal !== this.whereUrl
    }
  },
  methods: {
    _clearActive() {
      this.activeId = ''
      this.activeArr = []
    },
    _getActiveClass(item) {
      if (!this.multiple && !this.isCtrlMode) {
        return item[this.keyName] === this.activeId ? 'active' : ''
      } else {
        return this.activeArr.some(ai => ai[this.keyName] === item[this.keyName]) ? 'active' : ''
      }
    },
    handleClick(item) {
      // this.$message.info('d')
      this.$emit('dbClick', item)
    },
    handleActive(item) {
      this.isCtrlMode = false
      if (!this.multiple) {
        this.activeArr = []
        this.activeId = this.activeId === item[this.keyName] ? '' : item[this.keyName]
      } else {
        const findIndex = this.activeArr.findIndex(ai => ai[this.keyName] === item[this.keyName])
        if (findIndex > -1) {
          this.activeArr.splice(findIndex, 1)
        } else {
          this.activeArr.push(item)
        }
      }
    },
    handleCtrlClick(item) {
      if (this.multiple) return
      this.isCtrlMode = true
      // 处理多选习惯，若前单选时已选中一个则需要推入多选数组中
      if (this.activeArr.length < 1 && this.activeId) {
        const _item = this.datas.find(item => item[this.keyName] === this.activeId)
        _item && this.activeArr.push(_item)
      } 

      const findIndex = this.activeArr.findIndex(ai => ai[this.keyName] === item[this.keyName])
      if (findIndex > -1) {
        this.activeArr.splice(findIndex, 1)
      } else {
        this.activeArr.push(item)
      }
      console.log('-1item', item)
    },
    getActiveItem() {
      if (!this.multiple && !this.isCtrlMode) {
        return this.activeId ? this.datas.find(item => item[this.keyName] === this.activeId) : null
      } else {
        return this.activeArr.length > 0 ? this.activeArr.slice() : null
      }
    },
    contextMenuClicked(item) {
      if (this.contextMenus.length < 1) return ;
      this.$emit('contextMenuClicked', item)
    },
    _contextMenu(e) {
      if (this.contextMenus.length < 1) return ;
      e.preventDefault()
      e.stopPropagation()
      const activeItem = this.getActiveItem()
      if (!activeItem) return this.$alert('提示', '请先选择')
      if (activeItem instanceof Array && activeItem.length > 1) return this.$alert('提示', '此操作不支持多选')
      this.$refs.miniPanelContextMenu.showMenu(e, activeItem)
    },
    hideContextMenu() {
      this.$refs.miniPanelContextMenu.hideContextMenu()
    }
  }
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

.mini-panel {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.photo {
  padding: 2px 5px;
  margin-right: 4px;
  margin-bottom: 6px;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;

  $img-width: 110px;
  $img-medium-width: 185px;
  $img-bsmall-width: 150px;
  $img-small-width: 128px;
  $img--small-width: 80px;


  img {
    display: block;
    width: $img--small-width;
    height: $img--small-width;
    margin:8px 0;
    height: 80px;
    object-fit: contain;
  }
  p {
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    width: 0.9 * $img-width;
    padding:4px 0 12px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &.medium {
    margin-right: 8px;
    img {
      width: $img-medium-width;
      height: 130px;
      margin-bottom: 5px;
    }
    p {
      width: 0.8 * $img-medium-width;
    }
  }

  &.bsmall {
    margin-right: 1px;
    margin-left: -5px;
    img {
      display: block;
      width: $img-bsmall-width;
      height: 130px;
      margin-bottom: 5px;
    }
    p {
      height: 32px;
      line-height: 32px;
      width: 0.8 * $img-bsmall-width;
    }
  }
  
  &.small {
    margin-right: -1px;
    img {
      display: block;
      width: $img-small-width;
      height: 100px;
      margin-bottom: 5px;
      object-fit: contain;
    }
    p {
      height: 32px;
      line-height: 32px;
      width: 0.8 * $img-small-width;
    }
  }


  &:hover {
    background: rgba(251, 158, 82, 0.3);
  }
  &.active {
    background: rgba(251, 158, 82, 0.6);
  }
 
}
.tips {
  margin:0 5px;
  p {
    width: 200px;
    margin: 0 auto;
    font-size: $font-size;
    line-height: 20px;
  }
}
</style>